<template>
  <div class="container">
    <div>
      <h1 class="red">Hello {{ name }}!</h1>
      <div class="links">
        <p>
          <nuxt-link to="/todos">todos</nuxt-link>
        </p>
        <p>
          <nuxt-link to="/secret">secret</nuxt-link>
        </p>
        <p>
          <nuxt-link to="/parent">parent</nuxt-link>
        </p>
      </div>
      <hr>
      <ul>
        <li>
          <nuxt-link to="/section">section</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/child/123">Child 123</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/child/234">Child 234</nuxt-link>
        </li>
        <li>
          <nuxt-link to="/main">Main page with named view in layout</nuxt-link>
        </li>
      </ul>
    </div>
    <hr>
    <div>
      <div class="left">
        <NuxtChild name="left" />
      </div>

      <!-- 子组件 -->
      <div class="content">
        <NuxtChild />
      </div>
    </div>
    <div>
      <NuxtLink to="/posts">
        Blog
      </NuxtLink>
    </div>
    <hr>
    <!-- jwt -->
    <div>
      <div v-if="$store.state.jwt.auth">
        <p>
          You are authenticated. You can see the
          <NuxtLink to="/secret">
            secret page
          </NuxtLink>!
        </p>
        <button @click="logout">
          Logout
        </button>
      </div>
      <p v-else>
        Please
        <NuxtLink to="/login">
          login
        </NuxtLink>.
      </p>
    </div>
    <hr>
    <!-- auth -->
    <div>
      <nuxt-link to="/auth">auth</nuxt-link>
    </div>
    <hr>
    <!-- axios -->
    <div>
      <nuxt-link to="/axios">axios</nuxt-link>
    </div>
    <hr>
    <!-- cachedcomponents -->
    <div>
      <nuxt-link to="/cachedcomponents">cachedcomponents</nuxt-link>
    </div>
    <hr>
    <!-- newfetch -->
    <div>
      <nuxt-link to="/newfetch">newfetch</nuxt-link>
    </div>
    <hr>
    <!-- i18n -->
    <div>
      <nuxt-link to="/i18n">i18n</nuxt-link>
    </div>
    <hr>
    <!-- custom-page-loading -->
    <div>
      <nuxt-link to="/custompageloading">custompageloading</nuxt-link>
    </div>
    <hr>
    <!-- prefetch -->
    <div>
      <nuxt-link to="/prefetch">prefetch</nuxt-link>
    </div>
    <hr>
    <!-- notifications -->
    <div>
      <nuxt-link to="/notifications">notifications</nuxt-link>
    </div>
    <hr>
    <!-- routestransitions -->
    <div>
      <nuxt-link to="/routestransitions">routestransitions</nuxt-link>
    </div>
    <hr>
    <!-- styleresources -->
    <div>
      <nuxt-link to="/styleresources">styleresources</nuxt-link>
    </div>
    <hr>
    <!-- firebase -->
    <div>
      <nuxt-link to="/firebase">firebase</nuxt-link>
    </div>
    <hr>
    <!-- http -->
    <div>
      <nuxt-link to="/http">http</nuxt-link>
    </div>
    {{Date.now() | timeAgo}}
  </div>
</template>

<script>
  const Cookie = process.client ? require('js-cookie') : undefined

  export default {
    asyncData (context) {
      // called every time before loading the component
      return { name: 'World' }
    },
    fetch () {
      // The fetch method is used to fill the store before rendering the page
    },
    head() {
      return {
        title: '我的世界!',
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: '首次使用nuxt',
          }
        ]
      }
    },
    // and more functionality to discover
    methods: {
      logout () {
        Cookie.remove('auth')
        this.$store.commit('jwt/setAuth', null)
      }
    },
    mounted() {
      this.$toast.error('服务器开小差啦~~')
    },
  };
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  text-align: center;
}

.title {
  font-family:
    'Quicksand',
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>
